import { Button, Card, Input, Table, Tag, Space, Modal, Form, Select, message, Rate } from 'antd';
import { useState } from 'react';
import { SearchOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';

const { Search } = Input;
const { Option } = Select;

export default function Creators() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingCreator, setEditingCreator] = useState(null);

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '真实姓名',
      dataIndex: 'realName',
      key: 'realName',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '等级',
      dataIndex: 'level',
      key: 'level',
      render: (level: number) => (
        <Tag color="blue">Lv.{level}</Tag>
      ),
    },
    {
      title: '评分',
      dataIndex: 'rating',
      key: 'rating',
      render: (rating: number) => (
        <Rate disabled defaultValue={rating} />
      ),
    },
    {
      title: '粉丝数',
      dataIndex: 'followers',
      key: 'followers',
    },
    {
      title: '认证状态',
      dataIndex: 'verified',
      key: 'verified',
      render: (verified: boolean) => (
        <Tag color={verified ? 'success' : 'warning'}>
          {verified ? '已认证' : '未认证'}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      render: (enabled: boolean) => (
        <Tag color={enabled ? 'success' : 'error'}>
          {enabled ? '正常' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<CheckOutlined />}
            onClick={() => handleVerify(record)}
            disabled={record.verified}
          >
            认证
          </Button>
          <Button
            type="link"
            danger
            icon={<CloseOutlined />}
            onClick={() => handleDisable(record)}
          >
            {record.enabled ? '禁用' : '启用'}
          </Button>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      username: 'creator1',
      realName: '张三',
      email: 'creator1@codeplay.com',
      phone: '13800138001',
      level: 5,
      rating: 4.5,
      followers: 1234,
      verified: true,
      enabled: true,
    },
    {
      key: '2',
      username: 'creator2',
      realName: '李四',
      email: 'creator2@codeplay.com',
      phone: '13800138002',
      level: 3,
      rating: 4.0,
      followers: 567,
      verified: false,
      enabled: true,
    },
  ];

  const handleVerify = (creator) => {
    Modal.confirm({
      title: '确认认证',
      content: `确定要认证创作者 ${creator.username} 吗？`,
      onOk() {
        message.success('认证成功');
      },
    });
  };

  const handleDisable = (creator) => {
    Modal.confirm({
      title: creator.enabled ? '确认禁用' : '确认启用',
      content: `确定要${creator.enabled ? '禁用' : '启用'}创作者 ${creator.username} 吗？`,
      onOk() {
        message.success(`${creator.enabled ? '禁用' : '启用'}成功`);
      },
    });
  };

  return (
    <div>
      <Card>
        <div className="flex justify-between mb-4">
          <Search
            placeholder="搜索创作者"
            allowClear
            style={{ width: 300 }}
            prefix={<SearchOutlined />}
          />
          <Button
            type="primary"
            onClick={() => {
              setEditingCreator(null);
              form.resetFields();
              setIsModalVisible(true);
            }}
          >
            添加创作者
          </Button>
        </div>

        <Table columns={columns} dataSource={data} />
      </Card>

      <Modal
        title={editingCreator ? '编辑创作者' : '添加创作者'}
        open={isModalVisible}
        onOk={() => {
          form.validateFields().then(values => {
            console.log('Success:', values);
            setIsModalVisible(false);
            form.resetFields();
            message.success('保存成功');
          });
        }}
        onCancel={() => {
          setIsModalVisible(false);
          form.resetFields();
        }}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="realName"
            label="真实姓名"
            rules={[{ required: true, message: '请输入真实姓名' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="phone"
            label="手机号"
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="level"
            label="等级"
            rules={[{ required: true, message: '请选择等级' }]}
          >
            <Select>
              <Option value={1}>Lv.1</Option>
              <Option value={2}>Lv.2</Option>
              <Option value={3}>Lv.3</Option>
              <Option value={4}>Lv.4</Option>
              <Option value={5}>Lv.5</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="verified"
            label="认证状态"
            rules={[{ required: true, message: '请选择认证状态' }]}
          >
            <Select>
              <Option value={true}>已认证</Option>
              <Option value={false}>未认证</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="enabled"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select>
              <Option value={true}>正常</Option>
              <Option value={false}>禁用</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
} 